<template>
	<view>
		<!-- 选择贴膜型号 -->
		<view class="top" @click="clickType">
			<view class="">
				{{code || "请选择车型"}}
			</view>
			<view class="">
				<u-icon :name="show?'arrow-down':'arrow-right'" color="#fff" size="28"></u-icon>
			</view>
		</view>
		<u-image width="100%" height="350rpx" src="https://xdsbz.com:802/prod-api/profile/upload/my/1.jpg"></u-image>
		<!-- 整车 -->
		<view class="cen">
			<view class="item" v-for="(item,index) in cardList" :key="index">
				<view class="card">
					<view class="left">
						<view class="box" @click="clickItem(item,index)" :class="{checkmark:item.show}"></view>
						<view class="text">
							<view class="">
								{{item.moName}}
							</view>
							<view class="">
								￥{{item.moMoney}}
							</view>
						</view>
					</view>
					<view class="">
						<u-image width="120" height="120" :src="getImage(item.moPic)"></u-image>
					</view>
				</view>
				<u-line color="#fff" v-if="index != 10-1" />
			</view>
		</view>
		<view class="bottom">
			<view class="num">
				预计:{{getNum()}}
			</view>
			<view class="btn" @click="yy">
				前往预约>
			</view>
		</view>

		<u-popup v-model="show" mode="center" height="800rpx" closeable width="690rpx" z-index="20" border-radius="20">
			<view class="car">
				<view class="title">
					选择品牌及车型
				</view>
				<view class="search">
					<u-search placeholder="搜索品牌" v-model="keyword" @change="getKey(keyword)"
						:showAction="false"></u-search>
				</view>
				<view class="car_d">
					<view class="c_left">
						<scroll-view scroll-y="true" class="c_h_l">
							<view :class="['car_item',{action:index == carIndex}]" v-for="(item,index) in carList"
								:key="index" @click="clickCar(item,index)">
								{{item.brBrand}}
							</view>
						</scroll-view>
					</view>
					<view class="c_right">
						<view class="carIcon">
							<u-image width="160rpx" height="160rpx" :src="carSrc"></u-image>
						</view>
						<scroll-view scroll-y="true" class="c_h">
							<view class="c_h_c">
								<view :class="['c_h_i',{actionChild:index == carChildIndex}]"
									@click="clickChild(item,index)" v-for="(item,index) in carChildList" :key="index">
									{{item.brModel}}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		url
	} from "@/common/index.js"
	import {
		getMiniSelect,
		bwList,
		getBg,
		getCar,
		getCarList
	} from "@/common/api.js"
	export default {
		data() {
			return {
				show: false,
				list: [],
				cardList: [],
				code: "",
				num: 0,
				src: "",

				keyword: "",
				carList: [],
				carListOld: [], //筛选用
				carIndex: 0,
				// right
				carSrc: "",
				carChildList: [],
				carChildIndex: -1
			}
		},
		async onLoad(even) {
			// this.getMiniSelect()
			// 获取元素 
			let data = await bwList(even.item)
			data.rows.forEach(item => {
				item.show = false
			})
			this.cardList = data.rows
			this.getBj()

		},

		methods: {
			// 获取车品牌
			async clickCar(item, index) {
				this.carSrc = url + item.brPic
				this.carIndex = index
				this.carChildIndex = -1
				this.clickCarList(item.id, index)
			},
			// 获取车型
			async clickCarList(id, index) {
				let data = await getCarList(id)
				this.carChildList = data.rows
			},
			// 获取车型号
			clickChild(item, index) {
				this.selectItem = item
				this.carChildIndex = index
				this.code = item.brModel

				this.show = false
			},

			// 获取背景
			async getBj() {
				let data = await getBg(125)
				this.src = url + data.rows[0].baUrl
			},
			// 查看车企
			async clickType() {
				if (this.carChildIndex != -1) {
					return this.show = true
				}

				let data = await getCar({
					pageNum: 1,
					pageSize: 400
				})
				this.carList = data.rows
				this.carListOld = data.rows
				this.clickCar(data.rows[0], 0)
				this.show = true
			},
			// 实时获取输入框内容
			getKey(val) {
				let list = JSON.parse(JSON.stringify(this.carList))
				if (val != "") {
					let newData = []
					list.forEach(item => {
						if (item.brBrand && item.brBrand.indexOf(val) > -1) {
							newData.push(item)
						}
					})
					this.carList = newData
					this.clickCarList(newData[0].id, 0)
					this.carSrc = url + newData[0].brPic
				} else {
					this.carList = this.carListOld
					this.clickCarList(this.carListOld[0].id, 0)
					this.carSrc = url + this.carListOld[0].brPic
				}

				console.log(val);
			},
			// 不清楚用途
			async getMiniSelect() {
				let data = await getMiniSelect(100)
			},
			// 获取部位图片
			getImage(type) {
				return url + type
			},
			// 预约
			yy() {
				uni.navigateTo({
					url: "/pagesMy/my/store"
				})
			},
			// 选择部位
			clickItem(item, index) {
				if (index == 0) {
					if (item.show == true) {
						console.log("1");
						this.cardList.forEach(it => {
							it.show = false
						})
					} else {
						console.log("2");
						this.cardList.forEach(it => {
							it.show = true
						})
						console.log(this.cardList);
					}
					this.$forceUpdate()
				} else {
					item.show = !item.show
					let code = this.cardList.filter(item => item.show === false)
					if (code.length == 1 && code[0].show == false) {
						this.cardList[0].show = !this.cardList[0].show
					} else {
						this.cardList[0].show = false
					}
				}
				this.$forceUpdate()
			},
			// 自动计算价格
			getNum() {
				let data = this.cardList
				let num = 0;
				if (data[0]?.show) {
					return Number(data[0].moMoney).toFixed(2)
				} else {
					for (var i = 1; i < data.length; i++) {
						if (data[i].show) {
							num += Number(data[i].moMoney)
						}
					}
					return num.toFixed(2)
				}
			}
		}
	}
</script>

<style>
	.search {
		background-color: #fff;
		padding: 10rpx 20rpx;
		border-bottom: 1rpx solid #ccc;
	}

	.title {
		padding: 10rpx 20rpx;
		color: #222;
		height: 80rpx;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		background-color: #D2D2D2;
	}

	/* 车型 */
	.car {
		width: 100%;
		height: 100%;
		background-color: #222;
		overflow: hidden;
		padding-bottom: 20rpx;
	}

	.car_d {
		display: flex;
		width: 100%;
		height: calc(100% - 70rpx);
		overflow-y: auto;
		overflow: hidden;

	}

	.c_left {
		width: 250rpx;
		height: 100%;
		background-color: #313136;
		overflow-y: auto;
		color: #fff;
	}

	.car_item {
		padding: 20rpx 20rpx;
		border: 1rpx solid #fff;
	}

	/* 激活状态 */
	.action {
		background-color: #fff;
		color: #222;
	}

	.actionChild {
		background-color: #D2D2D2;
	}

	/* c_right */
	.c_right {
		width: 440rpx;
		height: 100%;
		background-color: #fff;
		padding-bottom: 40rpx;
	}
	.c_h_l {
		height: calc(100% - 70rpx);
		overflow-y: auto;
		display: flex;
		flex-wrap: wrap;
	}
	.c_h {
		height: calc(100% - 180rpx);
		overflow-y: auto;
		display: flex;
		flex-wrap: wrap;
	}

	.c_h_c {
		display: flex;
		flex-wrap: wrap;
	}

	.c_h_i {
		border: 1rpx solid #0E0D0D;
		padding: 10rpx 15rpx;
		margin-left: 10rpx;
		margin-top: 10rpx;
		height: 54rpx;
	}

	.carIcon {
		margin: 20rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.checkmark {
		display: inline-block;
		width: 30px;
		height: 30px;
		color: white;
		text-align: center;
		line-height: 20px;
	}

	.checkmark::before {
		content: "✔";
		display: inline-block;
	}

	page {
		background-color: #0E0D0D;
	}

	.top {
		display: flex;
		padding: 20rpx;
		color: #fff;
		justify-content: space-between;
		border: 1rpx solid #fff;
		width: 690rpx;
		margin: 20rpx 30rpx;
		border-radius: 20rpx;
	}

	.cen {
		padding-bottom: 80rpx;
	}

	.item {
		padding: 0 40rpx;
	}

	.card {
		display: flex;
		align-items: center;
		padding: 20rpx 40rpx;
		justify-content: space-between;
	}

	.left {
		display: flex;
		align-items: center;
		color: #fff;
	}

	.box {
		width: 50rpx;
		height: 50rpx;
		border: 1rpx solid #fff;
	}

	.text {
		margin: 30rpx;
	}

	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 80rpx;
		background-color: #131313;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
	}

	.num {
		font-size: 32rpx;
	}

	.btn {
		padding: 5rpx 20rpx;
		border-radius: 50rpx;
		background-color: #9A2222;
	}

	/deep/ .u-mode-center-box {
		background-color: #222;
	}
</style>